<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

</style>
<body>
<div id="class-example">
    <!-- 单个元素-->
    <!--<h1 v-if="ok >= 5">Yes</h1>-->
    <!--<h1 v-else>No</h1>-->


    <!-- 多个元素 template作为包装元素-->
    <!--<template v-if="ok">-->
    <!--<h1>Title</h1>-->
    <!--<p>Paragraph 1</p>-->
    <!--<p>Paragraph 2</p>-->
    <!--</template>-->
    <!--<div v-else>-->
    <!--Now you don't-->
    <!--</div>-->

    <!--   v-else-if  -->
    <!--<div v-if="type === 'A'">-->
    <!--A-->
    <!--</div>-->
    <!--<div v-else-if="type === 'B'">-->
    <!--B-->
    <!--</div>-->
    <!--<div v-else-if="type === 'C'">-->
    <!--C-->
    <!--</div>-->
    <!--<div v-else>-->
    <!--Not A/B/C-->
    <!--</div>-->
    <!-- 一次或者极少次数的渲染用if -->
    <!--  高效渲染效果 表单内容不清空,input表单中,加key则会重新渲染,清空输入,key相同也不清空-->
    <template v-if="loginType === false">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>
    <button @click="change">切换表单</button>
    <!-- v-show 类似ng-show 多切换时候要用它,避免多次渲染-->
    <h1 v-show="ok">Hello!</h1>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
    var vm = new Vue({
        el: '#class-example',
        data: {
            ok: 1,
            type: 'B',
            loginType: false
        },
        methods: {
            change: function () {
                this.loginType = !this.loginType;
            }
        }
    });
</script>